import React, { useEffect, useState } from 'react'
import styles from './index.module.scss'
import Title from '@/components/Title'
import { Carousel } from 'antd';


export default function EquipmentUsage({ device }) {
    const [dataListOdd, setDataListOdd] = useState([])
    const [dataListEven, setDataListEven] = useState([])

    useEffect(() => {
        setDataListOdd(device?.filter((item, index) => index % 2 !== 0))
        setDataListEven(device?.filter((item, index) => index % 2 === 0))
    }, [device])

    return (
        <div className={styles.equipment_usage_container}>
            <Title titleDescription={'认知设备使用情况'}>
                <div className='equipment-usage-container-annotation'>
                    设备数:
                    <span>
                        {device?.length}
                    </span>
                </div>
            </Title>

            <Carousel
                dots={false}
                autoplay
                autoplaySpeed={10000}
                className={styles.custom_carousel}
            >
                {Array.from({ length: Math.ceil(device?.length / 2) }).map((group, index) => (
                    <div key={index} className={styles.content}>

                        <div className={styles.use} key={dataListEven?.[index]?.id}>
                            <div className={`${styles.state} ${dataListEven?.[index]?.work === 2 ? styles.inUse : ''}`}>
                                <div className={styles.dian}></div>
                                {dataListEven?.[index]?.work === 2 ? '使用中' : '空闲中'}
                            </div>
                            <div className={styles.device_number}>{dataListEven?.[index]?.sn}</div>
                            <div className={styles.train_number}>
                                训练次数<span>{dataListEven?.[index]?.num}</span>
                            </div>
                            <div className={styles.region}>投放区域：{dataListEven?.[index]?.address}</div>
                            <div className={styles.time}>投放时间：{dataListEven?.[index]?.signed_at}</div>
                        </div>

                        {dataListOdd?.[index] ? <div className={styles.use} key={dataListOdd?.[index]?.id}>
                            <div className={`${styles.state} ${dataListOdd?.[index]?.work === 2 ? styles.inUse : ''}`}>
                                <div className={styles.dian}></div>
                                {dataListOdd?.[index]?.work === 2 ? '使用中' : '空闲中'}
                            </div>
                            <div className={styles.device_number}>{dataListOdd?.[index]?.sn}</div>
                            <div className={styles.train_number}>
                                训练次数<span>{dataListOdd?.[index]?.num}</span>
                            </div>
                            <div className={styles.region}>投放区域：{dataListOdd?.[index]?.address}</div>
                            <div className={styles.time}>投放时间：{dataListOdd?.[index]?.signed_at}</div>
                        </div> : <div className={styles.useOut}></div>}

                    </div>
                ))}
            </Carousel>
        </div>
    )
}
